<template>
  <div>
    <el-table class="mybox" :data="tableData" style="width: 100%" row-key="container_id"
      :expand-row-keys="expandedRows">
      <el-table-column type="expand">
        <template #default="props">
          <el-table v-if="props.row.web_list.length > 0&&props.row.web_list[0].web_audit!=null" class="mybox1"
            :data="props.row.web_list" :show-header="false">
            <el-table-column label="URL" width="300px">
              <template #default="scope">
                <span class="tit url">URL:</span>
                <a :href="JSON.parse(scope.row.web_audit).url" target="_blank">
                  {{ JSON.parse(scope.row.web_audit).url }}</a>
              </template>
            </el-table-column>
            <el-table-column label="网络类型">
              <template #default="scope">
                <span class="tit">网络类型：</span>
                <el-tag>{{
                  scope.row.connect_type == "nginx"
                  ? "建站服务"
                  : scope.row.connect_type == "floating_ip"
                  ? "独立ip"
                  : "自定义端口"
                  }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="是否违规">
              <template #default="scope">
                <el-tag :type="JSON.parse(scope.row.web_audit).is_violation
                    ? 'danger'
                    : 'success'
                  ">{{
                  JSON.parse(scope.row.web_audit).is_violation
                  ? "违规"
                  : "不违规"
                  }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="违规关键词" show-overflow-tooltip>
              <template #default="scope">
                <span class="tit"> 违规关键词：</span>
                <span v-for="item in JSON.parse(scope.row.web_audit).violation_keys">
                  {{ item }}&nbsp;
                </span>
              </template>
            </el-table-column>
            <el-table-column label="是否在线">
              <template #default="scope">
                <el-tag :type="JSON.parse(scope.row.web_audit).connect
                    ? 'success'
                    : 'danger'
                  ">{{
                  JSON.parse(scope.row.web_audit).connect ? "在线" : "离线"
                  }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button v-if="JSON.parse(scope.row.web_audit).is_violation" size="small" plain type="danger"
                  @click="del(JSON.parse(scope.row.web_audit).web_key)">移除违规记录</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="容器ID">
        <template #default="scope">
          <span class="item" @click="
            router.push(
              `/servers/containers?container_id=${scope.row.container_id}`
            )
            ">{{ scope.row.container_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="容器状态">
        <template #default="scope">
          <el-tag :type="scope.row.container_state == 0 || scope.row.container_state == 1
              ? 'info'
              : scope.row.container_state == 2
                ? 'success'
                : 'danger'
            ">{{
            scope.row.container_state == 0
            ? "未支付"
            : scope.row.container_state == 1
            ? "未开通"
            : scope.row.container_state == 2
            ? "开机"
            : "关机"
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <el-input v-model="pagin.key" size="small" placeholder="搜索容器" @blur="findIt" />
        </template>
      </el-table-column>
    </el-table>
    <div class="bt">
      <el-button type="primary" plain style="margin-bottom: 10px" @click="checkIt">手动触发审计</el-button>
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="pagin.page"
        :page-size="pagin.count" :page-sizes="[10, 20, 50, 100]" @update:current-page="handleCurrentPageChange"
        @update:page-size="handlePageSizeChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getSiteList, auditSite, delAudit } from "@/api/audit";
import { message } from "@/utils/message";
import { useRouter } from "vue-router";
const router = useRouter();
const tableData = ref([]);
const pagin = reactive({
  count: 10,
  page: 1,
  key:''
});
const total = ref(10);
onMounted(() => {
  getList();
});
const expandedRows = ref([]);
const getList = () => {
  getSiteList(pagin).then(res => {
    if (res.data.code == 200) {
      tableData.value = res.data.data;
      total.value = res.data.count;
      expandedRows.value = res.data.data.filter(
        item => item.web_list.length > 0
      );
      expandedRows.value = expandedRows.value.map(item => item.container_id);
      console.log('默认展开',expandedRows.value);
    }
  });
};
const checkIt = () => {
  auditSite().then(res => {
    if (res.data.code == 200) {
      message(res.data.msg, { type: "success" });
      getList();
    }
  });
};
const del = id => {
  delAudit({
    web_key: id
  }).then(res => {
    if (res.data.code == 200) {
      message(res.data.msg, { type: "success" });
      getList();
    }
  });
};
const findIt = () => {
  getList();
};

const handleCurrentPageChange = async newPage => {
  pagin.page = newPage;
  getList();
};
const handlePageSizeChange = async newSize => {
  pagin.count = newSize;
  getList();
};
</script>
<style lang="scss" scoped>
.bt {
  padding: 10px;
  background-color: white;
}

.item {
  cursor: pointer;

  &:hover {
    color: #409eff;
  }
}

.tit {
  color: #a1a1a1;
  font-size: 12px;
}

.url {
  padding-left: 45px;
}

a:hover {
  color: #409eff;
}
</style>

<style>
.mybox .el-table__row {
  background-color:#f1f1f1;
}
.mybox1 .el-table__row {
  background-color:white;
}
</style>
